<template>
  <div>
    <!-- store  是Vuex实例出来的会再VC身上产生 里面可以管理  actions mutations  state 这三个配置 -->
    <h2>计算之后的值:{{$store.state.sum}}</h2>
    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">如果现在的结果是奇数再+</button>
    <button @click="incrementWait">等一等再+</button>
  </div>
</template>

<script>
  export default {
    name:'Count',
    data(){
      return {
        n:1
      }
    },
    methods:{
      increment(){
          this.$store.dispatch('jia',this.n)
      },
      decrement(){
        this.$store.dispatch('jian',this.n)
      },
      incrementIfOdd(){
        if(this.$store.state.sum %2){
          this.$store.dispatch('jia',this.n)
        }
      },
      incrementWait(){
          setTimeout(()=>{
               this.$store.dispatch('jia',this.n)
          },500)
      }
    },
    mounted(){
      // console.log(this)
    }
  }
</script>

<style scoped>
  button{
    margin:5px;
  }
</style>